<template>
	<view>
		<view class="ceshi">
			<view class="header">
				<navigator open-type="navigate" :url="items.url" class="items xitems" v-for="(items, index) in topIcons" :key="index">
					<view class="header_icon">
						<view :class="['iconfont', items.icon]"></view>
					</view>
					<view class="header_text">{{items.title}}</view>
				</navigator>
			</view>
			<view class="xpadding"></view>
			<view class="content">
				<!-- <view class="content_top">
					<view class="btn1">近七日</view>
					<view class="btn2">昨日</view>
					<view class="btn3">今日</view>
				</view> -->
				<!-- <view class="content_footer" >
					<view class="content_l" >
						<view class="con_title">【预约到店】</view>
						<view class="con_content"  v-for="(items, index) in topData1" :key="index">
							<view class="con_text">{{items.title}}</view>
							<view class="con_num">{{items.num}}</view>
						</view>
					</view>
					<view class="content_r">
						<view class="con_title">【预约量房】</view>
						<view class="con_content"  v-for="(items, index) in topData2" :key="index">
							<view class="con_text">{{items.title}}</view>
							<view class="con_num">{{items.num}}</view>
						</view>
					</view>
				</view> -->
			</view>
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				topIcons: [
					{title: '机构信息', url: '/', icon: 'icon-loufang'},
					{title: '员工管理', url: '../administer/usermanagement/usermanagement', icon: 'icon-font_yuangongguanli'},
					{title: '工作交接', url: '../administer/connect/connect', icon: 'icon-3'},
					{title: '空间管理', url: '/', icon: 'icon-kongjian1'}
				],
				topData1: [
					{title: '待预约:',num:'20'},
					{title: '已预约:',num:'20'},
					{title: '已到店:',num:'20'}
				],
				topData2: [
					{title: '待预约:',num:'20'},
					{title: '已预约:',num:'20'},
					{title: '已到店:',num:'20'}
				]
			}
		},
		onLoad() {
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	.page{
		background-color: #fofofo;
	}
	.ceshi{
		width: 100%;
		.header{
			width: calc(100% - 96upx);
			display: flex;
			justify-content: space-between;
			margin: 0 48upx 0 48upx;
			.items{
				margin-top: 20upx;
				flex-direction: column;
				margin-bottom: 23upx;
				.header_icon{
					width: 100upx;
					height: 100upx;
					border-radius: 50%;
					background-color: #1b82d1;
					text-align: center;
					color: #FFFFFF;
					line-height: 100upx;
					.iconfont{
						font-size: 45upx;
					}
				}
				.header_text{
					color:#999999;
					font-size: 30upx;
					height: 30upx;
					line-height: 30upx;
					margin-top: 13upx;
					font-weight: 520;
				}
			}
		}
	}
	
	.content{
		height: 360upx;
		.content_top{
			width: 330upx;
			height: 60upx;
			margin-top: 20upx;
			display: flex;
			margin-left: 30upx;
			border: 1px solid #656565;
			border-radius: 10upx;
			overflow: hidden;
			.btn1{
				flex: 1;
				height: 60upx;
				line-height: 60upx;
				color:#FFFFFF;
				background-color: #1B82D1;
				text-align: center;
				border-right: 1px solid #656565;
				font-size: 30upx;
			}
			.btn2{
				flex: 1;
				height: 60upx;
				line-height: 60upx;
				color:#656565;
				text-align: center;
				border-right: 1px solid #656565;
				font-size: 30upx;
				
			}
			.btn3{
				flex: 1;
				height: 60upx;
				line-height: 60upx;
				color:#656565;
				background-color: #FFFFFF;
				text-align: center;
				font-size: 30upx;
			}
		}
		
	}
	
	
	.content_footer{
		width: 100%;
		height: 260upx;
		display: flex;
		align-items: center;
		.content_l{
			margin-top: 26upx;
			
			flex: 1;
			.con_title{
				margin-left: 33upx;
				color: #333333;
				font-size: 35upx;
				font-weight: bold;
			}
			.con_content{
				justify-content: space-between;
					margin-top: 25upx;
					margin-left: 29upx;
					font-size: 30upx;
					font-weight: bold;
					display: flex;
				.con_text{
					margin-left: 16upx;
					color: #333333;
				}
				.con_num{
					margin-right: 150upx;
				}
			}
			
		}
		.content_r{
			flex: 1;
		 	margin-top: 26upx;
		 	.con_title{
		 		margin-left: 33upx;
		 		color: #333333;
		 		font-size: 35upx;
		 		font-weight: bold;
		 	}
		 	.con_content{
		 			margin-top: 25upx;
		 			margin-left: 29upx;
		 			font-size: 30upx;
		 			font-weight: bold;
		 			display: flex;
					justify-content: space-between;
		 		.con_text{
		 			margin-left: 16upx;
		 			color: #333333;
		 		}
		 		.con_num{
					margin-right: 134upx;
		 		}
		 	}
		 	
		 }
		
	}
	
</style>
